<template>
    <view class="contanier">
        <!-- 自定义导航栏 -->
        <CustomNavBar></CustomNavBar>
        <view class="page-nav">
            <!-- 分类 -->
            <view class="type">
                <view class="title">八股</view>
                <view class="type-list">
                    <view class="type-item" v-for="(item, index) in typeList" :key="index" @click="handleType(item)">
                        <view :class="['iconfont ' + item.icon]"></view>
                        <view class="type-item-title">{{ item.title }}</view>
                    </view>
                </view>
            </view>
            <!-- 热门题库 -->
            <view class="hot">
                <view class="title">热门题库</view>
                <view class="hot-list">
                    <view class="hot-item" v-for="(item, index) in hotList" :key="index" @click="goQuestion(item)">
                        <view class="hot-item-title">
                            <view>{{ item.categoryName }}</view>
                        </view>
                        <view class="hot-item-info">共收录：{{ item.completedQuestions }} | {{ item.totalNum }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import CustomNavBar from './components/CustomNavBar.vue'
import { API_getHotChoiceQuestionList } from '@/service/home';
const typeList = [
    { id: 1, title: 'java基础', icon: 'icon-java' },
    { id: 2, title: 'java集合', icon: 'icon-Java' },
    { id: 3, title: 'java并发', icon: 'icon-Group' },
    { id: 4, title: '计算机网络', icon: 'icon-com-network' },
    { id: 5, title: '操作系统', icon: 'icon-caozuoxitong' },
    { id: 6, title: 'Mysql', icon: 'icon-redis' },
    { id: 7, title: 'Redis', icon: 'icon-mysql' },
    { id: 8, title: 'vue', icon: 'icon-vuejs' },
]

const hotList = ref<any>([])
// [
//     { title: '操作系统', val1: 99, val2: 0 },
//     { title: '计算机网络', val1: 99, val2: 0 },
//     { title: '数据结构与算法', val1: 99, val2: 0 },
//     { title: '编程语言', val1: 99, val2: 0 }
// ]


const handleType = (item: any) => {
    if (item.title === '全部分类') {
        uni.navigateTo({
            url: '/index_modules/classifyAll/classifyAll'
        })
    } else {
        uni.navigateTo({
            url: `/index_modules/category/category?title=${item.title}&id=${item.id}`
        })
    }
}

const goQuestion = (item: any) => {
    uni.navigateTo({
        url: `/index_modules/questions/questions?category=${item.category}&totalNum=${item.totalNum}&categoryName=${item.categoryName}`
    })
}

onShow(async () => {
    const res = await API_getHotChoiceQuestionList();
    if (res.code) {
        const arr = res.data ? res.data : [];
        hotList.value = arr.map((item: any) =>{
            if(item.category === 3){
                item.categoryName = 'java并发';
            }
            else if(item.category === 9){
                item.categoryName = '数据结构';
            }
            else if(item.category === 1){
                item.categoryName = 'java基础';
            }
            else if(item.category ===6){
                item.categoryName = 'Mysql';
            }
            else {
                item.categoryName = item.category;
            }
            return item;
        });
    }
})

</script>

<style scoped lang="scss">
.page-nav {
    background-color: #F1F1F1;

    .type {
        padding: 20rpx 0;
        margin: 18rpx;
        background-color: #fff;

        .title {
            padding: 20rpx 44rpx;
            color: #000;
            font-weight: 800;
            font-size: 32rpx;
        }

        .type-list {
            display: flex;
            flex-wrap: wrap;
            margin: 20rpx;

            .type-item {
                flex: 0 0 calc(25% - 20rpx);
                padding: 10rpx;
                margin-bottom: 10rpx;
                text-align: center;

                .iconfont {
                    font-size: 55rpx;
                    color: $color-main;

                }

                .type-item-title {
                    color: $color-title;
                    font-size: 24rpx;
                    margin-top: 10rpx;
                }
            }
        }
    }

    .hot {
        padding: 20rpx 0;
        margin: 18rpx;
        background-color: #fff;

        .title {
            padding: 20rpx 44rpx;
            color: #000;
            font-weight: 800;
            font-size: 32rpx;
        }

        .hot-list {
            margin: 20rpx 44rpx;

            .hot-item {
                padding: 20rpx;
                border: 2rpx solid $color-main;
                border-radius: 12rpx;
                margin-bottom: 20rpx;

                .hot-item-title {
                    color: #000;
                    font-size: 32rpx;
                }

                .hot-item-info {
                    color: #888;
                    font-size: 24rpx;
                    margin-top: 20rpx;
                }
            }
        }
    }
}
</style>
